<template>
  <div class="heritage-map">
    <div class="map-container">
      <div id="map" class="map"></div>
      <div class="map-controls">
        <el-button-group>
          <el-button type="primary" @click="zoomIn">
            <el-icon><ZoomIn /></el-icon>
          </el-button>
          <el-button type="primary" @click="zoomOut">
            <el-icon><ZoomOut /></el-icon>
          </el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useHeritageStore } from '@/stores/heritageStore'
import { ZoomIn, ZoomOut } from '@element-plus/icons-vue'

const heritageStore = useHeritageStore()
let map = null

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    map.destroy()
  }
})

const initMap = () => {
  // TODO: 初始化地图
}

const zoomIn = () => {
  if (map) {
    map.zoomIn()
  }
}

const zoomOut = () => {
  if (map) {
    map.zoomOut()
  }
}
</script>

<style scoped>
.heritage-map {
  height: 100vh;
  width: 100%;
}

.map-container {
  position: relative;
  height: 100%;
}

.map {
  height: 100%;
  width: 100%;
}

.map-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
</style> 